<template>
  <div class="settings-container">
    <div class="settings-header">
      <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
      <h1>设置</h1>
    </div>
    
    <div class="settings-content">
      <el-tabs v-model="activeTab" tab-position="left">
        <!-- 系统设置 -->
        <el-tab-pane label="系统设置" name="system">
          <div class="settings-section">
            <h2>系统设置</h2>
            <div class="setting-item">
              <div class="setting-label">主题</div>
              <div class="setting-control">
                <el-select v-model="systemSettings.theme" placeholder="选择主题">
                  <el-option :label="$t('white')" value="white"></el-option>
                  <el-option :label="$t('dark')" value="dark"></el-option>
                  <el-option :label="$t('green')" value="green"></el-option>
                </el-select>
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">语言</div>
              <div class="setting-control">
                <el-select v-model="systemSettings.language" placeholder="选择语言">
                  <el-option label="中文" value="zh"></el-option>
                  <el-option label="English" value="en"></el-option>
                  <el-option label="日本語" value="ja"></el-option>
                </el-select>
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">消息通知</div>
              <div class="setting-control">
                <el-switch
                  v-model="systemSettings.notifications"
                  active-text="开启"
                  inactive-text="关闭"
                />
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">声音提醒</div>
              <div class="setting-control">
                <el-switch
                  v-model="systemSettings.sound"
                  active-text="开启"
                  inactive-text="关闭"
                />
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">自动更新</div>
              <div class="setting-control">
                <el-switch
                  v-model="systemSettings.autoUpdate"
                  active-text="开启"
                  inactive-text="关闭"
                />
              </div>
            </div>
          </div>
        </el-tab-pane>
        
        <!-- 账号设置 -->
        <el-tab-pane label="账号设置" name="account">
          <div class="settings-section">
            <h2>账号设置</h2>
            <div class="setting-item">
              <div class="setting-label">用户名</div>
              <div class="setting-control">
                <el-input v-model="accountSettings.username" disabled></el-input>
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">邮箱</div>
              <div class="setting-control">
                <el-input v-model="accountSettings.email" disabled></el-input>
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">手机号</div>
              <div class="setting-control">
                <el-input v-model="accountSettings.phone" placeholder="请输入手机号"></el-input>
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">个性签名</div>
              <div class="setting-control">
                <el-input 
                  v-model="accountSettings.signature" 
                  type="textarea" 
                  placeholder="请输入个性签名"
                  :rows="3"
                ></el-input>
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">头像</div>
              <div class="setting-control">
                <el-upload
                  class="avatar-uploader"
                  action="#"
                  :auto-upload="false"
                  :show-file-list="false"
                >
                  <img v-if="accountSettings.avatar" :src="accountSettings.avatar" class="avatar" />
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </div>
            </div>
            
            <div class="setting-actions">
              <el-button type="primary" @click="saveAccountSettings">保存设置</el-button>
            </div>
          </div>
        </el-tab-pane>
        
        <!-- 隐私设置 -->
        <el-tab-pane label="隐私设置" name="privacy">
          <div class="settings-section">
            <h2>隐私设置</h2>
            <div class="setting-item">
              <div class="setting-label">允许陌生人查看我的资料</div>
              <div class="setting-control">
                <el-switch
                  v-model="privacySettings.strangerProfile"
                  active-text="允许"
                  inactive-text="不允许"
                />
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">允许通过手机号搜索到我</div>
              <div class="setting-control">
                <el-switch
                  v-model="privacySettings.searchByPhone"
                  active-text="允许"
                  inactive-text="不允许"
                />
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">允许通过邮箱搜索到我</div>
              <div class="setting-control">
                <el-switch
                  v-model="privacySettings.searchByEmail"
                  active-text="允许"
                  inactive-text="不允许"
                />
              </div>
            </div>
            
            <div class="setting-item">
              <div class="setting-label">消息同步</div>
              <div class="setting-control">
                <el-switch
                  v-model="privacySettings.messageSync"
                  active-text="开启"
                  inactive-text="关闭"
                />
              </div>
            </div>
            
            <div class="setting-actions">
              <el-button type="primary" @click="savePrivacySettings">保存设置</el-button>
            </div>
          </div>
        </el-tab-pane>
        
        <!-- 帮助中心 -->
        <el-tab-pane label="帮助中心" name="help">
          <div class="settings-section">
            <h2>帮助中心</h2>
            <div class="help-item">
              <h3>常见问题</h3>
              <ul>
                <li><a href="#" @click.prevent="showFAQ(1)">如何添加好友？</a></li>
                <li><a href="#" @click.prevent="showFAQ(2)">如何创建群组？</a></li>
                <li><a href="#" @click.prevent="showFAQ(3)">如何修改个人信息？</a></li>
                <li><a href="#" @click.prevent="showFAQ(4)">如何退出群组？</a></li>
              </ul>
            </div>
            
            <div class="help-item">
              <h3>联系客服</h3>
              <p>如有其他问题，请联系客服：</p>
              <p>邮箱：support@chatapp.com</p>
              <p>电话：400-123-4567</p>
            </div>
            
            <div class="help-item">
              <h3>关于我们</h3>
              <p>盼寻密友 v1.0.0</p>
              <p>© 2024 盼寻密友. 保留所有权利.</p>
            </div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: "Settings",
  data() {
    return {
      activeTab: "system",
      systemSettings: {
        theme: "white",
        language: "zh",
        notifications: true,
        sound: true,
        autoUpdate: true
      },
      accountSettings: {
        username: "张三",
        email: "zhangsan@example.com",
        phone: "",
        signature: "今天的阳光真好",
        avatar: require('@/assets/default-avatar.png')
      },
      privacySettings: {
        strangerProfile: true,
        searchByPhone: true,
        searchByEmail: false,
        messageSync: true
      }
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
    
    saveAccountSettings() {
      this.$message.success("账号设置已保存");
      // 这里应该调用API保存设置
    },
    
    savePrivacySettings() {
      this.$message.success("隐私设置已保存");
      // 这里应该调用API保存设置
    },
    
    showFAQ(id) {
      const faqs = {
        1: "添加好友的方法：在好友管理页面点击'添加好友'按钮，输入对方的用户名或邮箱发送好友请求。",
        2: "创建群组的方法：在群组管理页面点击'创建群组'按钮，填写群组信息并选择初始成员。",
        3: "修改个人信息的方法：在设置页面的'账号设置'选项卡中修改个人信息并保存。",
        4: "退出群组的方法：在群组管理页面找到要退出的群组，点击'退出'按钮确认即可。"
      };
      
      this.$alert(faqs[id], "帮助信息", {
        confirmButtonText: "确定"
      });
    }
  },
  watch: {
    // 监听主题变化
    "systemSettings.theme": {
      handler(newTheme) {
        // 移除当前主题类
        document.body.classList.remove("theme-white", "theme-dark", "theme-green");
        
        // 添加新主题类
        document.body.classList.add(`theme-${newTheme}`);
        
        // 保存主题设置到本地存储
        localStorage.setItem("theme", newTheme);
      },
      immediate: true
    },
    
    // 监听语言变化
    "systemSettings.language": {
      handler(newLanguage) {
        this.$i18n.locale = newLanguage;
        // 保存语言设置到本地存储
        localStorage.setItem("language", newLanguage);
      },
      immediate: true
    }
  }
};
</script>

<style scoped>
.settings-container {
  padding: 20px;
  height: 100%;
  overflow-y: auto;
}

.settings-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.settings-header h1 {
  margin: 0 0 0 20px;
  font-size: 24px;
  color: #333;
}

.settings-content {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 20px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.settings-section {
  padding: 30px 40px;
}

.settings-section h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 30px;
  text-align: center;
}

.setting-item {
  display: flex;
  align-items: center;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
}

.setting-item:last-child {
  border-bottom: none;
}

.setting-label {
  flex: 1;
  font-size: 16px;
  color: #333;
  font-weight: 500;
}

.setting-value {
  font-size: 16px;
  color: #666;
}

.setting-control {
  width: 300px;
}

.setting-actions {
  margin-top: 20px;
  text-align: center;
}

.help-item {
  margin-bottom: 30px;
}

.help-item h3 {
  font-size: 18px;
  color: #333;
  margin-bottom: 15px;
  font-weight: 500;
}

.help-item ul {
  padding-left: 20px;
}

.help-item li {
  margin-bottom: 10px;
  font-size: 14px;
  color: #666;
}

.help-item a {
  color: #409eff;
  text-decoration: none;
}

.help-item a:hover {
  text-decoration: underline;
}

.help-item p {
  color: #666;
  margin: 5px 0;
  font-size: 14px;
  line-height: 1.5;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: #1890ff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.avatar {
  width: 100px;
  height: 100px;
  display: block;
}

/* 移动端优化 */
@media (max-width: 767px) {
  .settings-container {
    padding: var(--spacing-sm);
  }
  
  .settings-header {
    margin-bottom: var(--spacing-sm);
  }
  
  .settings-header h1 {
    font-size: 20px;
    margin-left: var(--spacing-sm);
  }
  
  .settings-content {
    border-radius: 4px;
  }
  
  .settings-section {
    padding: var(--spacing-sm);
  }
  
  .settings-section h2 {
    font-size: 18px;
    margin-bottom: var(--spacing-sm);
  }
  
  .setting-item {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--spacing-sm) 0;
  }
  
  .setting-label {
    margin-bottom: var(--spacing-xs);
  }
  
  .setting-control {
    width: 100%;
  }
  
  .setting-actions {
    margin-top: var(--spacing-sm);
  }
  
  .help-item {
    margin-bottom: var(--spacing-md);
  }
  
  .help-item h3 {
    font-size: 15px;
    margin-bottom: var(--spacing-sm);
  }
  
  .help-item p {
    font-size: 13px;
  }
  
  .avatar-uploader-icon {
    font-size: 24px;
    width: 80px;
    height: 80px;
    line-height: 80px;
  }
  
  .avatar {
    width: 80px;
    height: 80px;
  }
}
</style>